import { createRoot } from "react-dom/client";
import CacheDialog from "./CacheDialog";
import StorageDialog from "./StorageDialog";
import CookieDialog from "./CookieDialog";
import DatabaseDialog from "./DatabaseDialog";
import { isDark } from "../utilities.mjs";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";

export function initUI() {
  const root = document.documentElement;
  const box = document.createElement("div");
  root.append(box);
  const shadow = box.attachShadow({ mode: "closed" });
  const inner = document.createElement("main");
  shadow.append(inner);

  const cache = createCache({
    key: "css",
    prepend: true,
    container: shadow,
  });

  const theme = createTheme({
    palette: {
      mode: isDark ? "dark" : "light",
    },
    typography: {
      htmlFontSize: Number.parseFloat(
        getComputedStyle(document.documentElement).fontSize,
      ),
    },
  });

  createRoot(inner).render(
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <CacheDialog inner={inner} />
        <StorageDialog inner={inner} />
        <CookieDialog inner={inner} />
        <DatabaseDialog inner={inner} />
      </ThemeProvider>
    </CacheProvider>,
  );
}
